<!-- 小海报-->
<template>
  <el-link
      :class="{'little-link':this.activeId !== this.id,'big-link':this.activeId === this.id}"
      :underline="false">
    <el-image
        @click="toChooseMovie"
        v-if="this.activeId !== this.id"
        :lazy="true"
        class="little-poster"
        :src="poster"/>
    <el-image
        :lazy="true"
        v-if="this.activeId === this.id"
        class="big-poster"
        :src="poster"/>
  </el-link>
</template>

<script>
export default {
  name: "LittlePosterTemplate",
  data() {
    return {}
  },
  methods: {
    toChooseMovie() {
      this.$emit('toChooseMovie', this.id)
    }
  },
  props: {
    poster: {
      type: String,
      default: ''
    },
    //当前图片标识
    id: Number,
    //活跃的id
    activeId: Number
  },
}
</script>

<style scoped>
.little-link {
  border: solid 4px #fff;
}

.little-poster {
  width: 150px;
  height: 200px;
}

.big-link {
  border: solid 4px #F66C6C;
}

.big-poster {
  width: 170px;
  height: 220px;
  z-index: 100;
}
</style>